<template>
  <div class="container">
    <nav-bar title="订单评价" />
    <div class="form">
      <div class="product">
        <div class="product-item" v-for="(item, index) in products" :key="index">
          <div class="img">
            <img :src='item.ProductImage' />
          </div>
          <div class="name-sku">
            <div class="name">{{item.ProductName}}</div>
            <div class="sku">
              {{item.ColorAlias + ': ' + item.color}}
              {{item.SizeAlias + ': ' + item.size}}
            </div>
          </div>
        </div>
      </div>
      
      <div class="comment">
        <div class="star-common starmain">
          <span>评分</span>
          <div class="stars">
            <i 
              v-for="(item, index) in [1,2,3,4,5]" 
              :key="index"
              @click="starTap(1, index)"
            >
              <img v-if="index<star1" src='../../assets/img/star-on.png' />
              <img v-else src='../../assets/img/star.png' />
            </i>
          </div>
        </div>
        <div class="content">
          <textarea placeholder="请输入评价内容" v-model="content"></textarea>
        </div>
        <div class="photo">
          <div class="upload-img">
            <van-uploader 
              v-model="uploadedImgs"
              multiple
              :max-count="9"
              :after-read="imgChanged"
            >
              <div class="plus"></div>
            </van-uploader>
          </div>
        </div>
        <div class="star-common starpack">
          <span>商品描述满意度</span>
          <div class="stars">
            <i 
              v-for="(item, index) in [1,2,3,4,5]" 
              :key="index"
              @click="starTap(2, index)"
            >
              <img v-if="index<star2" src='../../assets/img/star-on.png' />
              <img v-else src='../../assets/img/star.png' />
            </i>
          </div>
        </div>
        <div class="star-common stardeliv">
          <span>物流服务满意度</span>
          <div class="stars">
            <i 
              v-for="(item, index) in [1,2,3,4,5]" 
              :key="index"
              @click="starTap(3, index)"
            >
              <img v-if="index<star3" src='../../assets/img/star-on.png' />
              <img v-else src='../../assets/img/star.png' />
            </i>
          </div>
        </div>
        <div class="star-common starsevice">
          <span>服务态度满意度</span>
          <div class="stars">
            <i 
              v-for="(item, index) in [1,2,3,4,5]" 
              :key="index"
              @click="starTap(4, index)"
            >
              <img v-if="index<star4" src='../../assets/img/star-on.png' />
              <img v-else src='../../assets/img/star.png' />
            </i>
          </div>
        </div>
      </div>
    </div>
    <div class="btn-cart">
      <div class="btn-in" @click="pub">发布</div>
    </div>
  </div>
</template>

<script>
import NavBar from 'components/common/NavBar'
import { getUserOrder } from '../../network/user'
import { orderComment } from '../../network/product'
import { convertObjToEscapeStr } from '../../utils'
import { isEmoji, filterEmoji } from '../../utils'
import { Toast } from 'vant'

export default {
  components: {
    NavBar,
  },
  data() {
    return {
      orderId: null,
      userKey: localStorage.getItem('userKey'),
      star1: 5,
      content: '',
      star2: 5,
      star3: 5,
      star4: 5,
      uploadedImgs: [],
      uploadedImgsUrl: [],
      products: [],
      order: {},
      orderItem: [],
    }
  },
  mounted() {
    this.orderId = Number(this.$route.query.orderId)
    this.getUserOrder()
  },
  methods: {
    getUserOrder(){
      let requestData = {
        userkey: this.userKey,
        id: this.orderId
      }
      getUserOrder(requestData, order => {
        this.order = order.Order
        this.orderItem = order.OrderItem
        this.products = order.OrderItem
      })
    },
    pub(){
      // 检测是否表情符号
      let emojiFlag = isEmoji(this.content)
      if(emojiFlag){
        Toast('不支持表情符号')
        setTimeout(() => {
          this.content = filterEmoji(this.content)
        }, 2000)
        return false
      }

      let requestObj = {
        OrderId: this.orderId,
        ProductComments: [
          {
            ProductId: this.products[0].ProductId,
            Images: this.uploadedImgsUrl,
            WXmediaId: [],
            Mark: this.star1,
            Content: this.content,
            OrderItemId: this.orderItem[0].ItemId,
          },
        ],
        Score: 0,
        PackMark: this.star2,
        DeliveryMark: this.star3,
        ServiceMark: this.star4
      }
      let requestStr = requestObj
      let requestData = {
        userkey: this.userKey,
        Jsonstr: requestStr
      }

      orderComment(requestData, res => {
        Toast('评价成功')
        setTimeout(() => {
          this.$router.back()
        }, 1000)
      })
    },
    starTap(type, index){
      this['star' + type] = index + 1
    },
    imgChanged(file) {
      // 此时可以自行将文件上传至服务器
      let files = []
      if(file instanceof Array){ // 多张图
        file.map(item => {
          files.push(item.file)
        })
        this.uploadImg(files)
      } else { // 单张图
        files = [file.file]
        this.uploadImg(files)
      }
    },
    //上传图片
    uploadImg(files) {
      for(let i = 0; i < files.length; i++){
        this.put(files[i])
      }
    },
    put: async function (file) {
      let timestamp = new Date().getTime()
      let picName = timestamp + '-' + parseInt(Math.random() * 99)
      let fileType = file.type.split('/')[1]
      try {
        let result = await this.$client.put('mini/develop/comment/' + picName + '.' + fileType, file)
        console.log(result.url)
        // this.uploadedImgs[this.uploadedImgs.length-1].imageUrl = result.url
        this.uploadedImgsUrl.push(result.url)
        console.log('ok')
        console.log(this.uploadedImgsUrl)
      } catch (e) {
        console.log('Error: ', e)
      }
    },
  },
}
</script>

<style scoped>
.form .product{
  border-radius: 6px;
  padding: 10px;
  margin: 15px;
  background: #fff;
}
.form .product-item{
  display: flex;
  margin-bottom: 10px;
}
.form .product-item:last-child{
  margin-bottom: 0;
}
.form .product .img{
  margin-right: 10px;
}
.form .product .img img{
  width: 80px;
  height: 80px;
  border-radius: 5px;
}
.form .product .name-sku{
  padding-top: 10px;
}
.form .product .name-sku .name{
  line-height: 1.4;
  color: #333;
  font-size: 14px;
  height: 40px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-all;
  box-sizing: border-box;
}
.form .product .name-sku .sku{
  color: #ccc;
  font-size: 14px;
}
.form .comment{
  padding: 10px;
  margin: 15px;
  border-radius: 6px;
  background: #fff;
}
.form .comment .content textarea{
  color: #333;
  font-size: 14px;
  height: 80px;
  width: 100%;
  border: 1px solid #e4e4e4;
  border-radius: 4px;
  overflow: hidden;
  margin-top: 10px;
  padding: 10px;
  box-sizing: border-box;
  background-color: #f7f7f7;
  outline: none;
}
.star-common{
  display: flex;
  align-items: center;
  height: 45px;
}
.star-common .stars{
  display: flex;
  align-items: center;
  height: 45px;
  padding-left: 10px;
}
.star-common .stars i{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 45px;
}
.star-common .stars i img{
  width: 25px;
  height: 25px;
}

.photo{
  margin-top: 10px;
}
.plus{
  position: relative;
  height: 80px;
  width: 80px;
  border-radius: 3px;
  background-color: #eae8e8;
}
.plus:before{
  display: block;
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 36px;
  height: 1px;
  margin-left: -18px;
  margin-top: -1px;
  background-color: #8a8888;
}
.plus:after{
  display: block;
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  height: 36px;
  width: 1px;
  margin-top: -18px;
  background-color: #8a8888;
}
.btn-cart{
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 15px;
  background-image: linear-gradient(rgba(255, 255, 255, 0), #ffffff, #ffffff);
}
.btn-cart .btn-in{
  line-height: 50px;
  border-radius: 50px;
  color: #ffffff;
  text-align: center;
  background-color: #000000;
}
</style>